In questo tutorial vedremo come utilizzando i CSS sia possibile creare un pop-up senza bordi sile flash, che si chiuda tramite la simpatica X in alto o in basso del POP-UP.
Questo tipo di POP-UP ha il "vantaggio" di non essere bloccato dal Firewall di Windows XP, come succede con i POP-UP Flash privi di cornice.
Sicuramente si tratta di uno strumento utilie per fare pubblicità all'interno del proprio sito.
Per questo tutorial sono necessari:
- Un editor testuale o HTML
- Un programma grafico (opzionale).
Realizziamo il codice CSS da inserire tra i TAGs HEAD della nostra pagina.
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}
#banner {
position:absolute;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
border:0px;
background-color:#FFFFFF;
width: 245px;
height: 181px;
left: 333px;
top: 151px;
}
#banner a
{
color:#FFCC00;
text-decoration:none;
background-color:#FFFFFF;
}
#banner a:hover
{
color:#FFCC00;
text-decoration:underline;
background-color:#FFFFFF;
}
#chiudi
{
position:absolute;
width:9px;
background-color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#000000;
left: 570px;
top: 137px;
text-align:right;
}
#chiudi a
{
background-color:#FFFFFF;
font-weight:bold;
color:#000000;
text-decoration:none;
text-align:right;
}
#chiudi a:hover
{
background-color:#FFFFFF;
font-weight:bold;
color:#990000;
text-decoration:none;
text-align:right;
}
</style>
Ora passiamo alla realizzazione del codice presente tra i TAGs BODY. Eccolo qui sotto abbondantemente commentato:
<body>
<!-- Inzio codice testo pagina -->
Qui il testo della pagina... (noi abbiamo messo le classiche frasi latine..)
<!-- Fine codice testo pagina -->
<!-- Inizio codice POP-UP -->
<div id="banner">
<a href="http://www.agwebsolutions.it" target="_blank"><img src="immagine.png" border="0" alt="Clicca qui" /></a>
</div>
<!-- fine codice pop-up -->
<!-- Inizio codice barra di chiusura POP-UP -->
<div id="chiudi" align="right">
<a href="#" onclick="banner.style.display='none';
chiudi.style.display='none'"><strong>X</strong></a>
</div>
<!-- Fine codice barra di chiusura POP-UP -->
</body>
Qui salviamo la pagina e proviamo a vedere il risultato.
La posizione del POP-UP possiamo settarla tra i TAGs STYLE, oppure se disponiamo di un editor HTML con visualizzazione "Design" possiamo spostarlo comodamente con il mouse...
A voi il piacere (se mai vorreste) di cambiare la posizione della X rispetto al POP-UP.
fonte: http://www.webmasterpoint.org
Stampa 
